<template>
  <div class="service-condition">
    <el-row class="search">
      <div style="display: flex;line-height: 60px;">
        <div class="icons">
          <i class="iconfont icon-huiyi"></i>
        </div>
        <span class="icone">会议室使用情况</span>
      </div>
      <div>
        <el-button class="button1" @click="dialogFormVisible=true">新增会议</el-button>
      </div>
    </el-row>
<!--    头部日周月跳转-->
    <div class="tabsBox1" style="display: flex">
      <el-tabs
          v-model="activeName"
          type="card"
          class="demo-tabs"
          @tab-click="handleClick"
      >
        <div>
        <el-tab-pane label="日" name="first">
          <div class="rooms">
            <div class="roomLeft">
              <p class="meet-p">会议室</p>
  <!--            搜索框-->
              <div class="Searc">
                <el-input
                    class="w-50"
                    placeholder="搜索会议"
                    :suffix-icon="Search"
                />
                <el-button class="filte">
                  <el-icon><Filter /></el-icon>
                </el-button>
              </div>
  <!--        会议名称大盒子-->
              <div class="conference-title">
                <div class="size-all">
<!--                  弹框-->
<!--                  <template >-->
<!--                    <div class="tooltip-base-box">-->
<!--                      <div class="row">-->
<!--                        <el-tooltip-->
<!--                            class="box-item"-->
<!--                            effect="dark"-->
<!--                            content="Right Center prompts info"-->
<!--                            placement="right"-->
<!--                        >-->
<!--                          <el-button>right</el-button>-->
<!--                        </el-tooltip>-->
<!--                      </div>-->
<!--                     </div>-->
<!--                  </template>-->
                  <p class="leftSize" v-for="item in itemList">
                    {{item.placeName}}
                  </p>
                </div>

              </div>

            </div>
            <div class="roomRight">
              <p class="front">{{ getdayDate }}(周一)单位:时</p>
              <table style="width: 100%;border-collapse:collapse;"  class="tableBox" >
                <tbody>
                  <tr>
                    <td v-for="(item,index) in dayDate" :key="index">{{ index }}</td>
                  </tr>
                <tr>
                  <td v-for="item in dayDate" :key="item"></td>
                </tr>
                  <tr>
                    <td v-for="item in dayDate" :key="item"></td>
                  </tr>
                  <tr>
                    <td v-for="item in dayDate" :key="item"></td>
                  </tr>
                  <tr>
                    <td v-for="item in dayDate" :key="item"></td>
                  </tr>
                  <tr>
                    <td v-for="item in dayDate" :key="item"></td>
                  </tr>
                  <tr>
                    <td v-for="item in dayDate" :key="item"></td>
                  </tr>
                  <tr>
                    <td v-for="item in dayDate" :key="item"></td>
                  </tr>
                  <tr>
                    <td v-for="item in dayDate" :key="item"></td>
                  </tr>
                  <tr>
                    <td v-for="item in dayDate" :key="item"></td>
                  </tr>
                  <tr>
                    <td v-for="item in dayDate" :key="item"></td>
                  </tr>

                </tbody>
              </table>
            </div>

          </div>

        </el-tab-pane>
        </div>
          <div>
            <el-tab-pane label="周" name="second">
              <div class="rooms">
                <div class="roomLeft">
                  <p class="meet-p">会议室</p>
                  <!--            搜索框-->
                  <div class="Searc">
                    <el-input
                        class="w-50"
                        placeholder="搜索会议"
                        :suffix-icon="Search"
                    />
                    <el-button class="filte">
                      <el-icon><Filter /></el-icon>
                    </el-button>
                  </div>
                  <!--        会议名称大盒子-->
                  <div class="conference-title">
                    <div class="size-all">
                      <p class="leftSize" v-for="item in itemList">
                        {{item.placeName}}
                         </p>
                    </div>
                  </div>
                </div>
                <!-- 右边 -->
                <div class="roomRight">
                  <p class="front">2022年42周</p>
                  <table style="width: 100%;border-collapse:collapse;" class="tableBox">
                    <tbody>
                    <tr>
                      <td v-for="(item,index) in weekList" :key="item">{{ weekData(item)}}</td>
                    </tr>
                    <tr>
                      <td v-for="item in weekList" :key="item"></td>
                    </tr>
                    <tr>
                      <td v-for="item in weekList" :key="item"></td>
                    </tr>
                    <tr>
                      <td v-for="item in weekList" :key="item"></td>
                    </tr>
                    <tr>
                      <td v-for="item in weekList" :key="item"></td>
                    </tr>
                    <tr>
                      <td v-for="item in weekList" :key="item"></td>
                    </tr>
                    <tr>
                      <td v-for="item in weekList" :key="item"></td>
                    </tr>
                    <tr>
                      <td v-for="item in weekList" :key="item"></td>
                    </tr>
                    <tr>
                      <td v-for="item in weekList" :key="item"></td>
                    </tr>
                    <tr>
                      <td v-for="item in weekList" :key="item"></td>
                    </tr>
                    <tr>
                      <td v-for="item in weekList" :key="item"></td>
                    </tr>

                    </tbody>
                  </table>
                </div>
              </div>
            </el-tab-pane>
          </div>

          <div>
            <el-tab-pane label="月" name="third" >
              <div class="rooms">
                <div class="roomLeft">
                  <p class="meet-p">会议室</p>
                  <!--            搜索框-->
                  <div class="Searc">
                    <el-input
                        class="w-50"
                        placeholder="搜索会议"
                        :suffix-icon="Search"
                    />
                    <el-button class="filte">
                      <el-icon><Filter /></el-icon>
                    </el-button>
                  </div>
                  <!--        会议名称大盒子-->
                  <div class="conference-title">
                    <div class="size-all">
                      <p class="leftSize" v-for="item in itemList">
                        {{item.placeName}}</p>
                    </div>
                  </div>

                </div>
                <!-- 右边 -->
                <div class="roomRight">
                  <p class="front">2022年10月 (31天)</p>

                  <table style="width: 100%;border-collapse:collapse;" class="tableBox">
                    <tbody>
                    <tr>
                      <td v-for="(item,index) in monthDate" :key="item">{{item}}</td>
                    </tr>
                    <tr>
                      <td v-for="item in monthDate" :key="item"></td>
                    </tr>
                    <tr>
                      <td v-for="item in monthDate" :key="item"></td>
                    </tr>
                    <tr>
                      <td v-for="item in monthDate" :key="item"></td>
                    </tr>
                    <tr>
                      <td v-for="item in monthDate" :key="item"></td>
                    </tr>
                    <tr>
                      <td v-for="item in monthDate" :key="item"></td>
                    </tr>
                    <tr>
                      <td v-for="item in monthDate" :key="item"></td>
                    </tr>
                    <tr>
                      <td v-for="item in monthDate" :key="item"></td>
                    </tr>
                    <tr>
                      <td v-for="item in monthDate" :key="item"></td>
                    </tr>
                    <tr>
                      <td v-for="item in monthDate" :key="item"></td>
                    </tr>
                    <tr>
                      <td v-for="item in monthDate" :key="item"></td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </el-tab-pane>

          </div>
<!--        下面表格最大盒子-->
        <div class="bottom-all">
          <el-table
              ref="multipleTableRef"
              :data="tableData"
              style="width: 100%"
              @selection-change="handleSelectionChange"
              :header-cell-style="{
              fontWeight:'normal',
              fontSize:'12px',
              color:'#000000',
              background:'#EFF3F8',
            }"
          >
            <el-table-column property="bookName" label="会议名称" width="120" />
            <el-table-column property="author" label="召集人" />
            <el-table-column property="bookMoney" label="会议类型" />
            <el-table-column property="publisher" label="会议地点" />
            <el-table-column property="publishingDate" label="开始日期" />
            <el-table-column property="classes" label="结束日期" />
            <el-table-column property="classes" label="状态" />
          </el-table>

        </div>
      </el-tabs>
<!--      tabs右边-->
      <div class="rightTabls" style="position: absolute; right: 50px">
        <div class="rightTabls-box">
          <p class="boxGreen"></p>
          <div>占用</div>
        </div>
        <div class="rightTabls-box">
          <p class="boxYellow"></p>
          <div>待审批</div>
        </div>
        <div class="rightTabls-box">
          <p class="boxPink"></p>
          <div>冲突</div>
        </div>
      </div>
    </div>
  </div>

</template>

<script lang="ts">
import {defineComponent, onBeforeMount, onMounted, reactive, ref} from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import axios from "axios";
export default defineComponent({
  setup(){

    const activeName = ref('first')
    const dayDate = ref(24)
    const weekList = ref(7)
    const dayTop = ref()

    const itemList = ref([
    ])
// 生命周期
    onBeforeMount(()=>{
      axios.post("http://localhost:1688/allPlace/placeNameAll").then((res)=>{
        itemList.value=res.data.data
        console.log(itemList)

  })
})


    const weekData = (type: any) => {
      switch (type) {
        case 1:
          return '周日'
        case 2:
          return '周一'
        case 3:
          return '周二'
        case 4:
          return '周三'
        case 5:
          return '周四'
        case 6:
          return '周五'
        case 7:
          return '周六'
      }
    }

    const monthDate = ref()
    const getdayDate = ref()
    // 1.定义方法
    const getOneMonth = () => {
      const date = new Date() //获取新的时间
      console.log(date)
      // 获取本年的月份
      const month = new Date(date.getFullYear(), date.getMonth() + 1,0)
      // 获取本月的天数
      const monthDay = month.getDate()
      for(let i = 1; i <= monthDay; i++) {
        monthDate.value = i
      }
      //获取月份  补零
      const getMonth = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
      //获取当天
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      getdayDate.value = getMonth + '月'+ day + '日'
      console.log(getdayDate)
    }
    //2.抛出方法
    getOneMonth()

    const mothevlaue =ref(true);
    // const itemList = ref([
    //
    //
    // ])



    /**
     * 通过点击日周月 触发
     * @param tab 获取对象
     * @param event 事件源
     */
    const handleClick = (tab: TabsPaneContext, event: Event) => {


    }
    const mothe = ()=>{

    }
    return {
      activeName,
      handleClick,
      Search,
      dayDate,
      weekList,
      dayTop,
      mothevlaue,
      mothe,
      itemList,
      weekData,
      getOneMonth,
      monthDate,
      getdayDate,


    }
  }
})
</script>

<style scoped>
@import url("../../../public/imgsY/icon/iconfont.css");

*{
  margin: 0px;
  padding: 0px;
}

.el-row{
  padding: 5px 0px;
}

/deep/ .el-tabs__header {
  margin-bottom: 0px;
  position: relative;
}

.rightTabls {
  display: flex;
  font-size: 14px;
}

.rightTabls p {
  width: 20px;
  height: 20px;
}
.rightTabls .boxGreen {
  background-color: #E4F6D9;
}
.rightTabls .boxYellow {
  background-color: #FFECCE;
}
.rightTabls .boxPink {
  background-color: #FDE2EB;
}



.rightTabls .rightTabls-box {
  margin-right: 20px;
  text-align: -webkit-center;
}

/*搜索框和筛选按钮*/
.search{
  border: 1px solid silver;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.icons{
  width: 50px;
  height: 50px;
  background: dodgerblue;
  text-align: center;
  line-height: 50px;
  /*圆角*/
  border-radius: 40px;
  margin-left: 20px;
}

/*会议*/
.icon-huiyi {
  color: white;
  font-size: 24px;
  line-height: 50px;
}

.icone{
  padding-left: 15px;
  line-height: 50px;
}

/*左边大盒子*/
.roomLeft{
  width: 200px;
}
/*左边会议室*/
.meet-p{
  height: 40px;
  line-height: 40px;
  border-right: 1px solid gainsboro;
  border-left: 1px solid gainsboro;
  padding-bottom: 3px;
}

/*搜索框*/
.w-50{
  width: 160px;
  height: 35px;
}
/*筛选框*/
.filte{
  width: 40px;
  height: 35px;
}

.button1{
  background: dodgerblue;
  color: white;
  margin-right: 40px;
  padding: 5px;
}
.demo-tabs > .el-tabs__content {
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs__header is-top {
  width: 50px;
}

.rooms {
  display: flex;
}

.roomLeft {
  width: 200px;
  height: 440px;
}
/*右边空白格子最大盒子*/
.roomRight {
  text-align: center;
}

/*左边盒子上的会议室*/
.meet-p{
  text-align: center;
  font-size: 12px;
}
/*筛选*/
.filte{
  display: flex;
}
/*大盒子的头部文字*/
.front{
  text-align: center;
}
/*会议名称大盒子*/
.conference-title{
  font-size: 12px;
  background-color: #F5F5F5;
  width: 100%;
}
.size-all{
  width: 100%;
}
/*会议搜索和筛选*/
.Searc{
  display: flex;
  width: 100%;
}
/*左右两边对齐*/
.front{
  margin:15px 0px 5px 0px;
}

.leftSize {
  height: 35px;
  background-color: gainsboro;
  line-height: 35px;
  font-size: 14px;
  border-bottom:1px solid silver;
}

.tableBox {
  width: 100%;
}
/*日页面的盒子宽度*/
.tableBox tr td {
  border: 1px solid silver;
  height: 35px;
  width: 45px;
}
/*周页面格子宽度*/
.tableBox tr td[data-v-a670f0e2]{
  width: 158px;
}

/*下面表格最大盒子*/
.bottom-all{
  height: 100%;

}













</style>